import Indicator from '@/base-ui/indicator'
import { Button } from 'antd'
import React, { memo, useState } from 'react'
import { DemoWrapper } from './style'

const Demo = memo(() => {
  const swipeArr = [1,'sssssssssssssssss',2,'ss',3,4,5,6,7,8,9]

  const [currIndex, setCurrIndex] = useState(0);

  function switchIndex(isNext) {
    let newIndex = isNext ? (currIndex + 1) : (currIndex - 1)
    if(newIndex<0) newIndex = swipeArr.length-1
    newIndex = swipeArr.length === newIndex ? 0 : newIndex;
    setCurrIndex(newIndex)
  }

  return (
    <DemoWrapper>
      <button onClick={e=>switchIndex(false)}>上一个</button>
      <button onClick={e => switchIndex(true)}>下一个</button>
      <div className='list'>
        <Indicator selectIndex={currIndex}>
          {swipeArr.map(item => {
            return <Button key={item}>{item}</Button>
          })}
        </Indicator>
      </div>
    </DemoWrapper>
  )
})

export default Demo